<template>
  <div class="scaleContainer">
    <el-tooltip class="item" effect="light" :content="$t('message.xmindMap.reduce')" placement="top">
      <div class="btn el-icon-minus" @click="narrow">
        <el-icon><Minus /></el-icon>
      </div>
    </el-tooltip>
    <div class="scaleInfo">{{ scaleNum }}%</div>
    <el-tooltip class="item" effect="light" :content="$t('message.xmindMap.amplify')" placement="top">
      <div class="btn el-icon-plus" @click="enlarge">
        <el-icon><Plus /></el-icon>
      </div>
    </el-tooltip>
  </div>
</template>

<script setup lang="ts">
import {
  ref,
  reactive,
  toRefs,
  watch ,
  onMounted,
  getCurrentInstance
} from 'vue' 
import type {ComponentInternalInstance} from 'vue'
const instance: any = getCurrentInstance() as ComponentInternalInstance;
const proxy: any = instance.proxy as any; // 访问 proxy 属性
import { useHookI18n } from '@/hooks/i18n'
const { locale,$t } = useHookI18n()
import { useRouter } from "vue-router"
const router = useRouter();

const emit = defineEmits([""])
const props = defineProps({
  mindMap: {
    type: Object,
  }
})

const scaleNum = ref(100)

watch(()=>props.mindMap,(val, oldVal)=>{
  if (val && !oldVal) {
    props.mindMap.on("scale", (scale) => {
      scaleNum.value = toPer(scale);
    });
    scaleNum.value = toPer(props.mindMap.view.scale)
  }
})

function toPer(scale) {
  return (scale * 100).toFixed(0)
}
function narrow() {
  props.mindMap.view.narrow();
}
function enlarge() {
  props.mindMap.view.enlarge();
}
function setScale(val){
  scaleNum.value = toPer(val);
}
</script>
<style lang="scss" scoped>
.scaleContainer {
  display: flex;
  align-items: center;

  .btn {
    cursor: pointer;
    display: flex;
    align-items: center;
    box-shadow: none !important;
    padding: 0px !important;
  }

  .scaleInfo {
		width: 40px;
		text-align: center;
    margin: 0 20px;
  }
}
</style>